<template>
  <div class="course-order">
    <!--    第一个卡片-->
    <el-card>
      <div class="desc-box">
        <div class="title">订单列表</div>
        <div class="desc">您可以对订单列表进行查询！</div>
      </div>
      <div class="use-box">
        <div class="search-box">
          <span class="search-name">系统订单号 :</span>
          <el-input v-model="queryInfo.OrderNo" clearable @clear="getTableList" placeholder="请输入系统订单号"></el-input>
        </div>
        <div class="search-box" id="user-name">
          <span class="search-name">用户姓名 :</span>
          <el-input v-model="queryInfo.Name" clearable @clear="getTableList" placeholder="请输入用户姓名"></el-input>
        </div>

        <div class="search-box">
          <span class="search-name">用户手机 :</span>
          <el-input v-model="queryInfo.Phone" clearable @clear="getTableList" placeholder="请输入用户手机"></el-input>
        </div>

      </div>
      <div class="use-box-1">
        <div class="search-box-1">
          <span class="search-name">支付状态 :</span>
          <el-select v-model="queryInfo.Status" placeholder="请选择支付状态">
            <el-option :value="0" label="-----查询全部-----"></el-option>
            <el-option v-for="(item,index) in status" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>

        <div class="search-box-2">
          <span class="search-name">支付方式 :</span>
          <el-select v-model="queryInfo.PayType" placeholder="请选择支付方式">
            <el-option :value="0" label="-----查询全部-----"></el-option>
            <el-option v-for="(item,index) in payType" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>

        <div class="button-box">
          <el-button class="search-button" @click="getTableList" type="primary">查询</el-button>
        </div>
      </div>

    </el-card>
    <!--    第二个卡片-->
    <el-card class="second-card">
      <el-button type="primary" class="invoicing" @click="automaticInvoice" :disabled="automaticButton"> 一键开票
      </el-button>
      <span class="button-desc">（一键开票功能在勾选需要开票的用户后开放！）</span>
      <el-table ref="table" border max-height="530px" v-loading="loading" element-loading-text="拼命加载中......" :data="tableData" :cell-style="{textAlign:'center'}" :header-cell-style="{textAlign:'center'}" :header-cell-class-name="setHeaderRowClassName" @selection-change="handleSelectionChange">
        <el-table-column type="index" label="序号" fixed></el-table-column>
        <el-table-column type="selection" :selectable="selectable" width="60px"></el-table-column>
        <el-table-column label="ID">
          <p slot-scope="scope">{{ scope.row.ID }}</p>
        </el-table-column>
        <el-table-column prop="OrderNo" label="系统订单号" width="170px"></el-table-column>
        <el-table-column prop="StudentNo" label="用户学号" width="170px"></el-table-column>
        <el-table-column prop="CourseSerialNumber" label="课程编号"></el-table-column>
        <el-table-column prop="Name" label="用户姓名"></el-table-column>
        <el-table-column prop="Phone" label="用户手机号" width="110px"></el-table-column>
        <el-table-column prop="Title" label="学期名称" width="150px"></el-table-column>
        <el-table-column prop="SubjectName" label="学科名称"></el-table-column>
        <el-table-column prop="ClassName" label="	班级名称" width="200px"></el-table-column>
        <el-table-column prop="Price" label="	支付价格/元" width="100px">
          <p slot-scope="scope">{{ scope.row.Price|rounding }}</p>
        </el-table-column>
        <el-table-column prop="PayTime" label="支付时间" :formatter="dateFormat" width="200px">
        </el-table-column>
        <el-table-column prop="PayType" label="	支付方式" width="100px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.PayType===1" effect="plain" size="mini">微信支付</el-tag>
            <el-tag v-if="scope.row.PayType===2" effect="plain" type="success" size="mini">现金支付</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="Status" label="订单状态" width="100px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.Status===1" effect="plain" size="mini">已支付</el-tag>
            <el-tag v-if="scope.row.Status===3" type="danger" size="mini" effect="plain">已退款</el-tag>
          </template>

        </el-table-column>
        <el-table-column prop="Invoice" label="是否开票" width="100px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.Invoice===0" effect="plain" size="mini" type="danger">未开票</el-tag>
            <el-tag v-if="scope.row.Invoice===1" effect="plain" size="mini" type="success">已开票</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="班级调整">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="classAdjustmentClick(scope.row)" :disabled="scope.row.Status===3">班级调整
            </el-button>
          </template>

        </el-table-column>

        <el-table-column label="退款操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="refundOrderClick(scope.row)">退款</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!--    分页-->
      <pagination :child-msg="queryInfo" @callFather="callFather"></pagination>
    </el-card>

    <!--    班级调整对话框-->
    <class-adjustment-dialog v-if="isShowDialogComponent" :is-show-dialog-component="isShowDialogComponent" @handleClose="handleClose" :adjustment-main-id="adjustmentMainId" :adjustment-info="adjustmentInfo"></class-adjustment-dialog>

    <!--    一键开票对话框-->
    <automatic-invoice v-if="isShowAutomaticInvoice" :is-show-automatic-invoice="isShowAutomaticInvoice" @handleAutomaticInvoiceClose="handleAutomaticInvoiceClose" :id-list="multipleSelection" :multiple-data="multipleData">

    </automatic-invoice>

  </div>
</template>

<script>
//引入封装接口的类
import CourseOrder from "../../model/courseOrder";
//引入分页的组件
import Pagination from "../../components/base/pagination/Pagination";
//引入调整班级对话框
import ClassAdjustmentDialog from "./childComps/ClassAdjustmentDialog";
import AutomaticInvoice from "./childComps/AutomaticInvoice";
import moment from "moment";

export default {
  name: "CourseOrder",
  components: {
    Pagination,
    ClassAdjustmentDialog,
    AutomaticInvoice,
  },
  data() {
    return {
      isShowDialogComponent: false,
      isShowAutomaticInvoice: false,
      adjustmentMainId: 0,
      adjustmentInfo: [],
      tableData: [],
      queryInfo: {
        Name: "",
        Phone: "",
        OrderNo: "",
        Status: 0,
        PayType: 0,
        Page: 1,
        Limit: 10,
        total: 0,
      },
      status: [
        {
          label: "已支付",
          value: "1",
        },
        {
          label: "已退款",
          value: "3",
        },
      ],
      payType: [
        {
          label: "微信支付",
          value: "1",
        },
        {
          label: "现金支付",
          value: "2",
        },
      ],
      //开票多选框里面选择的值
      multipleSelection: [],
      //保存多选框里面选择的值，用作展示
      multipleData: [],
      //一键开票按钮是否为禁用状态
      //true为禁用，false为使用
      automaticButton: true,
      radio: "",
    };
  },
  created() {
    this.getTableList();
  },
  filters: {
    //显示价格的方法
    rounding(price) {
      return price.toFixed(2);
    },
  },
  methods: {
    //时间戳
    dateFormat(row, column) {
      let date = row[column.property];
      if (date === undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD hh:mm:ss");
    },
    //设置绑定学科的表头样式
    setHeaderRowClassName({ rowIndex }) {
      if (rowIndex === 0) {
        return "setHeaderSubjectColumnName";
      }
    },
    handleClose(payload) {
      if (payload === "submitButton") {
        this.getTableList();
      }
      this.isShowDialogComponent = false;
    },
    //分页的回调
    callFather(value) {
      if (value.currentPage) this.queryInfo.Page = value.currentPage;
      if (value.pageSize) this.queryInfo.Limit = value.pageSize;
      this.getTableList();
    },
    //获取学科列表
    async getTableList() {
      try {
        this.loading = true;
        const result = await CourseOrder.PageSearch(this.queryInfo);
        this.tableData = result.ListData;
        this.queryInfo.total = result.Total;
        this.loading = false;
        this.initImageUrlList();
      } catch (err) {
        this.loading = false;
      }
    },
    //点击退款按钮触发
    async refundOrderClick(rowInfo) {
      console.log(rowInfo);
      const confirmResult = await this.$confirm(
        "此操作将为" + rowInfo.Name + "退款" + "，" + "是否继续?",
        "此操作涉及退款，请谨慎操作",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult === "cancel") {
        this.$message.info("已取消为该学生退款的操作");
      } else {
        if (rowInfo.Status === 1) {
          CourseOrder.RefundOrder({ ID: rowInfo.ID });
          await this.getTableList();
          this.$message.success("已成功为该学生退款");
        } else {
          this.$message.error("该学生暂未支付，无法进行退款操作");
        }
      }
    },
    //点击调整班级触发
    classAdjustmentClick(rowInfo) {
      this.isShowDialogComponent = true;
      this.adjustmentMainId = rowInfo.ID;
      this.adjustmentInfo = rowInfo;
    },
    //表格多选框选项改变时候触发
    handleSelectionChange(rowInfo) {
      if (rowInfo.length === 0) {
        this.tableData.forEach((item) => {
          item.disabled = false;
        });
        this.automaticButton = true;
      } else {
        this.tableData.forEach((item) => {
          if (rowInfo[0].StudentNo !== item.StudentNo) {
            item.disabled = true;
          }
        });
        this.automaticButton = false;
      }
      this.multipleSelection = rowInfo.map((item) => item.ID);
      this.multipleData = rowInfo;
      console.log(this.multipleSelection);
    },
    //某一条信息是否可以被点击
    selectable(row) {
      if (row.Status === 3 || row.Invoice === 1) {
        return false;
      } else {
        return !row.disabled;
      }
    },
    handleAutomaticInvoiceClose(payload) {
      if (payload === "submitButton") {
        this.getTableList();
      }
      this.isShowAutomaticInvoice = false;
    },
    //点击一键开票按钮触发
    automaticInvoice() {
      this.isShowAutomaticInvoice = true;
    },
  },
};
</script>

<style scoped>
/deep/ .el-table__header-wrapper .el-checkbox {
  display: none;
}

.course-order {
  background-color: #eee;
}

.desc-box {
  padding: 5px;
  border-bottom: 1px solid #4c76af;
  margin-bottom: 20px;
}

.desc-box .title {
  font-size: 20px;
  font-weight: bold;
}

.desc-box .desc {
  margin-top: 15px;
  font-size: 14px;
  color: #dc143c;
}

.use-box {
  display: flex;
  margin-bottom: 25px;
}

.use-box-1 {
  display: flex;
}

.use-box-1 .search-name {
  margin-right: 15px;
}

.search-box {
  display: flex;
}

.search-box-2 {
  margin-left: 185px;
}

.search-name {
  width: 120px;
  line-height: 40px;
  font-size: 14px;
  font-weight: bold;
}

#user-name {
  padding: 0 145px;
}

.search-button {
  margin-left: 50px;
}

.el-card {
  box-shadow: none;
  margin-top: 10px;
}

.second-card {
  padding-bottom: 80px;
  position: relative;
}

.el-pagination {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.button-box {
  height: 50px;
  width: 100px;
  margin-top: 4px;
}

.button-desc {
  color: #dc143c;
  font-weight: bold;
  margin-left: 30px;
  font-size: 14px;
}

/*一键开票按钮*/
.invoicing {
  margin-bottom: 20px;
}

/deep/ .el-tag {
  border-radius: 0;
}

/*给表头一行加背景颜色*/
/deep/ .setHeaderSubjectColumnName {
  background-color: #e6e6fa !important;
  opacity: 0.7 !important;
}
</style>






